<template>
  <div class="all-message-list">
    <div class="title-area">
      <van-nav-bar
        title="消息"
        left-text=""
        right-text=""
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <div class="tab-area">
      <van-tabs
        v-model="active"
        title-inactive-color="#999"
        @click="handleTabClick"
      >
        <van-tab title="全部" name="0"></van-tab>
        <van-tab title="审批协作" name="1"></van-tab>
        <van-tab title="业务信息" name="2"></van-tab>
        <van-tab title="系统通知" name="3"></van-tab>
      </van-tabs>
    </div>
    <div class="tab-content">
      <div class="status-goods-list list-contract">
        <!-- 全部消息 -->
        <div v-if="active === '0'">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多啦"
            @load="load_more"
            class="publist"
          >
            <ul v-if="list && list.length">
              <li v-for="(item, index) in list" :key="index">
                <div class="list-content-box">
                  <div class="hd">
                    <div class="hd-lf">
                      <i class="i1" v-if="item.templateType === 3"></i>
                      <i class="i2" v-if="item.templateType === 2"></i>
                      <i class="i3" v-if="item.templateType === 1"></i>
                      <h2>{{ item.templateType | formatStatus }}</h2>
                    </div>
                    <div class="hd-rt">
                      <span class="status time">{{
                        parseTime(item.createTime)
                      }}</span>
                    </div>
                  </div>
                  <van-divider style="margin: 0" />
                  <div class="bd">
                    <div class="row-hd">
                      <div class="row-hd-lf">
                        <strong>{{ item.templateNickname }}</strong>
                      </div>
                      <div class="row-hd-rt" v-if="item.templateType === 3">
                        <span class="status doing">
                          <span
                            class="status time"
                            v-if="item.templateParams"
                            >{{ item.templateParams.taskType }}</span
                          >
                        </span>
                      </div>
                    </div>
                    <div class="inner-bd">
                      <p
                        class="row-item"
                        v-for="(o, index) in convertQuotes(
                          item.templateContent
                        )"
                        :key="index"
                      >
                        <span class="lf-txt"> {{ o.keyname + ": " }}</span
                        ><span
                          class="rt-span"
                          v-html="parseWxUserAndDepartment(o)"
                        ></span>
                      </p>
                    </div>
                  </div>
                  <van-divider style="margin: 0" />
                  <div class="bottom" @click="handleGo($event, item)">
                    <span class="b-l1">查看详情</span>
                    <span class="b-l2"
                      ><van-icon name="arrow" size="14" color="#999"
                    /></span>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </div>
        <!-- 全部消息 end -->
        <!-- 系统消息 -->
        <div v-if="active === '3'">
          <van-list
            v-model="systemObj.loading"
            :finished="systemObj.finished"
            finished-text="没有更多啦"
            @load="load_more_system"
            class="publist"
          >
            <ul
              class="m-message-list"
              v-if="systemObj.list && systemObj.list.length"
            >
              <li v-for="(item, index) in systemObj.list" :key="index">
                <div class="list-content-box">
                  <div class="hd">
                    <div class="hd-lf">
                      <i class="i2"></i>
                      <h2>{{ item.templateType | formatStatus }}</h2>
                    </div>
                    <div class="hd-rt">
                      <span class="status time">{{
                        parseTime(item.createTime)
                      }}</span>
                    </div>
                  </div>
                  <van-divider style="margin: 0" />
                  <div class="bd">
                    <div class="row-hd">
                      <div class="row-hd-lf">
                        <strong>{{ item.templateNickname }}</strong>
                      </div>
                    </div>
                    <div class="inner-bd">
                      <p
                        class="row-item"
                        v-for="(o, index) in convertQuotes(
                          item.templateContent
                        )"
                        :key="index"
                      >
                        <span class="lf-txt"> {{ o.keyname + ": " }}</span
                        ><span
                          class="rt-span"
                          v-html="parseWxUserAndDepartment(o)"
                        ></span>
                      </p>
                    </div>
                  </div>
                  <van-divider style="margin: 0" />
                  <div class="bottom" @click="handleGo($event, item)">
                    <span class="b-l1">查看详情</span>
                    <span class="b-l2"
                      ><van-icon name="arrow" size="14" color="#999"
                    /></span>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </div>
        <!-- 系统消息 end -->
        <!-- 业务消息 -->
        <div v-if="active === '2'">
          <van-list
            v-model="serviceObj.loading"
            :finished="serviceObj.finished"
            finished-text="没有更多啦"
            @load="load_more_service"
            class="publist"
          >
            <ul
              class="m-message-list"
              v-if="serviceObj.list && serviceObj.list.length"
            >
              <li v-for="(item, index) in serviceObj.list" :key="index">
                <div class="list-content-box">
                  <div class="hd">
                    <div class="hd-lf">
                      <i class="i3"></i>
                      <h2>{{ item.templateType | formatStatus }}</h2>
                    </div>
                    <div class="hd-rt">
                      <span class="status time">{{
                        parseTime(item.createTime)
                      }}</span>
                    </div>
                  </div>
                  <van-divider style="margin: 0" />
                  <div class="bd">
                    <div class="row-hd">
                      <div class="row-hd-lf">
                        <strong>{{ item.templateNickname }}</strong>
                      </div>
                    </div>
                    <div class="inner-bd">
                      <p
                        class="row-item"
                        v-for="(o, index) in convertQuotes(
                          item.templateContent
                        )"
                        :key="index"
                      >
                        <span class="lf-txt"> {{ o.keyname + ": " }}</span
                        ><span
                          class="rt-span"
                          v-html="parseWxUserAndDepartment(o)"
                        ></span>
                      </p>
                    </div>
                  </div>
                  <van-divider style="margin: 0" />
                  <div class="bottom" @click="handleGo($event, item)">
                    <span class="b-l1">查看详情</span>
                    <span class="b-l2"
                      ><van-icon name="arrow" size="14" color="#999"
                    /></span>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </div>
        <!-- 业务消息 end -->
        <!-- 审批消息 -->
        <div v-if="active === '1'">
          <van-list
            v-model="checkObj.loading"
            :finished="checkObj.finished"
            finished-text="没有更多啦"
            @load="load_more_check"
            class="publist"
          >
            <ul
              class="m-message-list"
              v-if="checkObj.list && checkObj.list.length"
            >
              <li v-for="(item, index) in checkObj.list" :key="index">
                <div class="list-content-box">
                  <div class="hd">
                    <div class="hd-lf">
                      <i class="i1"></i>
                      <h2>审批协作</h2>
                    </div>
                    <div class="hd-rt">
                      <span class="status time">{{
                        parseTime(item.createTime)
                      }}</span>
                    </div>
                  </div>
                  <van-divider style="margin: 0" />
                  <div class="bd">
                    <div class="row-hd">
                      <div class="row-hd-lf">
                        <strong>{{ item.templateNickname }}</strong>
                      </div>
                      <div class="row-hd-rt">
                        <span class="status doing">
                          <span
                            class="status time"
                            v-if="item.templateParams"
                            >{{ item.templateParams.taskType }}</span
                          >
                        </span>
                      </div>
                    </div>
                    <div class="inner-bd">
                      <p
                        class="row-item"
                        v-for="(o, index) in convertQuotes(
                          item.templateContent
                        )"
                        :key="index"
                      >
                        <span class="lf-txt"> {{ o.keyname + ": " }}</span
                        ><span
                          class="rt-span"
                          v-html="parseWxUserAndDepartment(o)"
                        ></span>
                      </p>
                    </div>
                  </div>
                  <van-divider style="margin: 0" />
                  <div class="bottom" @click="handleGo($event, item)">
                    <span class="b-l1">查看详情</span>
                    <span class="b-l2"
                      ><van-icon name="arrow" size="14" color="#999"
                    /></span>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </div>
        <!-- 审批消息 end -->
      </div>
    </div>
  </div>
</template>

<script>
import { getMyNotifyMessagePage } from "@/api/system/notify/message";
export default {
  name: "Message",
  data() {
    return {
      active: "0",
      loading: false,
      finished: false,
      list: [],
      queryParams: {
        pageNo: 0,
        pageSize: 10,
        readStatus: null,
        createTime: [],
        templateType: "",
      },
      serviceObj: {
        list: [],
        loading: false,
        finished: false,
        total: 0,
        queryParams: {
          pageNo: 0,
          pageSize: 10,
          readStatus: null,
          createTime: [],
          templateType: 1,
        },
      },
      checkObj: {
        list: [],
        loading: false,
        finished: false,
        total: 0,
        queryParams: {
          pageNo: 0,
          pageSize: 10,
          readStatus: null,
          createTime: [],
          templateType: "",
        },
      },
      systemObj: {
        list: [],
        loading: false,
        finished: false,
        total: 0,
        queryParams: {
          pageNo: 0,
          pageSize: 10,
          readStatus: null,
          createTime: [],
          templateType: 2,
        },
      },
    };
  },
  filters: {
    formatStatus(value) {
      switch (value) {
        case 1:
          return "业务信息";
        case 2:
          return "系统通知";
        case 3:
          return "审批协作";
        default:
          return "全部";
      }
    },
  },
  methods: {
    convertQuotes(str) {
      let str1 = eval(str);
      return str1;
    },
    parseWxUserAndDepartment(value) {
      let reg = /\$(\S*)\$/; // 正则表达式，注意两边的{}即是指定的字符
      if (!value.value.match(reg)) {
        return value.value;
      }
      const result = value.value.split("-");
      var finalResult = "";
      result.forEach((item) => {
        let resultArr = item.match(reg); // 主要利用了正则表达式的match方法，结果是个数组
        finalResult =
          finalResult +
          `<open-data type='${resultArr[1].split("=")[0]}' :openid='${
            resultArr[1].split("=")[1]
          }'></open-data>`;
      });
      // console.log(finalResult)
      return finalResult;
    },
    handleTabClick(e, name) {
      if (this.active === "1") {
        this.checkObj.list = [];
        this.checkObj.queryParams.pageNo = 0;
        this.load_more_check();
      } else if (this.active === "2") {
        this.serviceObj.list = [];
        this.serviceObj.queryParams.pageNo = 0;
        this.load_more_service();
      } else if (this.active === "3") {
        this.systemObj.list = [];
        this.systemObj.queryParams.pageNo = 0;
        this.load_more_system();
      } else {
        this.list = [];
        this.queryParams.pageNo = 0;
        this.load_more();
      }
    },
    load_more: function () {
      this.queryParams.pageNo += 1;
      this.onLoad();
    },
    onLoad() {
      this.loading = true;
      let sendData = this.queryParams;
      getMyNotifyMessagePage(sendData).then((res) => {
        let rows = res.data.list;
        if (rows == null || rows.length === 0) {
          this.loading = false; // 关闭加载状态
          this.finished = true; // 加载结束
          return;
        }
        this.loading = false; // 关闭加载状态
        this.total = res.data.total; //数据总条数
        this.list = this.list.concat(rows); //合并数组
        // 如果合并之后的数组长度大于返回的数据总条数
        if (this.list.length >= this.total) {
          this.finished = true; // 加载结束
        }
      });
    },
    load_more_service: function () {
      this.serviceObj.queryParams.pageNo += 1;
      this.onload_service();
    },
    onload_service() {
      this.serviceObj.loading = true;
      let sendData = this.serviceObj.queryParams;
      getMyNotifyMessagePage(sendData).then((res) => {
        let rows = res.data.list;
        if (rows == null || rows.length === 0) {
          this.serviceObj.loading = false; // 关闭加载状态
          this.serviceObj.finished = true; // 加载结束
          return;
        }
        this.serviceObj.loading = false; // 关闭加载状态
        this.serviceObj.total = res.data.total; //数据总条数
        this.serviceObj.list = this.serviceObj.list.concat(rows); //合并数组
        // 如果合并之后的数组长度大于返回的数据总条数
        if (this.serviceObj.list.length >= this.serviceObj.total) {
          this.serviceObj.finished = true; // 加载结束
        }
      });
    },
    load_more_check: function () {
      this.checkObj.queryParams.pageNo += 1;
      this.onLoad_check();
    },
    onLoad_check() {
      this.checkObj.loading = true;
      let sendData = this.checkObj.queryParams;
      getMyNotifyMessagePage(sendData).then((res) => {
        let rows = res.data.list;
        if (rows == null || rows.length === 0) {
          this.checkObj.loading = false; // 关闭加载状态
          this.checkObj.finished = true; // 加载结束
          return;
        }
        this.checkObj.loading = false; // 关闭加载状态
        this.checkObj.total = res.data.total; //数据总条数
        this.checkObj.list = this.checkObj.list.concat(rows); //合并数组
        // 如果合并之后的数组长度大于返回的数据总条数
        if (this.checkObj.list.length >= this.checkObj.total) {
          this.checkObj.finished = true; // 加载结束
        }
      });
    },
    load_more_system: function () {
      this.systemObj.queryParams.pageNo += 1;
      this.onLoad_system();
    },
    onLoad_system() {
      this.systemObj.loading = true;
      let sendData = this.systemObj.queryParams;
      getMyNotifyMessagePage(sendData).then((res) => {
        let rows = res.data.list;
        if (rows == null || rows.length === 0) {
          this.systemObj.loading = false; // 关闭加载状态
          this.systemObj.finished = true; // 加载结束
          return;
        }
        this.systemObj.loading = false; // 关闭加载状态
        this.systemObj.total = res.data.total; //数据总条数
        this.systemObj.list = this.systemObj.list.concat(rows); //合并数组
        // 如果合并之后的数组长度大于返回的数据总条数
        if (this.systemObj.list.length >= this.systemObj.total) {
          this.systemObj.finished = true; // 加载结束
        }
      });
    },
    getQueryParams(url) {
      // 使用正则表达式提取查询字符串
      let queryString = url.split("?")[1];
      if (!queryString) {
        return {};
      }
      // 将查询字符串分割成键值对
      let params = {};
      let pairs = queryString.split("&");
      pairs.forEach(function (pair) {
        let [key, value] = pair.split("=");
        params[decodeURIComponent(key)] = decodeURIComponent(value || "");
      });

      return params;
    },
    handleGo(e, item) {
      if (item.templateParams && item.templateParams.detailUrl) {
        let queryObj = this.getQueryParams(item.templateParams.detailUrl);
        this.$router.push({
          name: "MMessageDetail",
          query: {
            id: queryObj.id,
          },
        });
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
  },
};
</script>

<style lang="scss" scoped>
.all-message-list {
  .list-contract {
    padding: 12px 0 0 0;
    li {
      padding: 0 12px;
      margin: 0 0 12px 0;
    }
  }
  .list-content-box {
    background-color: #fff;
    border-radius: 6px 6px 6px 6px;
    .hd {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 12px 8px 0px;
    }
    .hd-lf {
      flex: 1;
    }
    .bd {
      .img-area {
        text-align: center;
      }
      .inner-bd {
        padding: 12px;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        .bd-lf {
          flex: 1;
        }
        .bd-right {
          text-align: center;
        }
      }
    }
    .bottom {
      overflow: hidden;
      padding: 14px 12px 14px 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      .b-l2 {
        padding: 6px 0 0 0;
      }
      .b-l1 {
        flex: 1;
        font-size: 12px;
        color: #222222;
      }
    }
    i {
      margin: 0 12px 0 12px;
      display: inline-block;
      vertical-align: middle;
      width: 22px;
      height: 22px;
    }
    .i1 {
      background: url("../assets/image/message/hd_icon1.png");
      background-size: 100%;
    }
    .i2 {
      background: url("../assets/image/message/hd_icon2.png");
      background-size: 100%;
    }
    .i3 {
      background: url("../assets/image/message/hd_icon3.png");
      background-size: 100%;
    }
    h2 {
      font-size: 14px;
      color: #222222;
      font-weight: 700;
      display: inline-block;
      vertical-align: middle;
      margin: 0;
      padding: 0;
    }
    .hd-rt {
      .time {
        font-size: 12px;
        color: #999;
      }
    }
  }
  .row-hd {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 12px 6px 12px;
    .row-hd-lf {
      flex: 1;
    }
    strong {
      font-size: 14px;
      color: #222222;
      line-height: 20px;
      text-align: left;
    }
    .doing {
      font-size: 12px;
      color: #3875f6;
    }
  }
  .row-item {
    margin: 0 0 8px 0;
    color: #666;
    .lf-txt {
      width: 70px;
      overflow: hidden;
      white-space: nowrap;
      text-align: left;
      float: left;
    }
    .rt-span {
      color: #222222;
    }
  }
  .row-item:last-child {
    margin-bottom: 0;
  }
  .btm-area {
    border-top: 1px solid #efefef;
    display: flex;
    height: 49px;
    line-height: 49px;
    background: #ffffff;
    .btn-reset {
      text-align: center;
      flex: 1;
      font-size: 16px;
      color: #3875f6;
      cursor: pointer;
    }
    .btn-confirm {
      text-align: center;
      font-size: 16px;
      color: #fff;
      background: #3875f6;
      flex: 1;
      cursor: pointer;
    }
  }
}
</style>
